<div ng-init="init();" class="kmi-layout-content mobileOPM01-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'mobileOPM01.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content system-info">
        <div class="kmi-row-fields" style="padding: 8px; border-bottom: 1px #cecece solid;">
            <div class="column-item">
                <label class="label" ng-bind="'mobileOPM01.loading_time' | translate"></label>
                <label class="value" ng-bind="loading_time"></label>
                <div style="flex: 1;"></div>
                <button class="kmi-button__mobile" ng-click="upDate();" style="flex: 0 0 60px;">
                    <label ng-bind="'mobileOPM01.refresh' | translate"></label>
                    <div class="kmi-can-click"></div>
                </button>
            </div>
        </div>
        <div class="kmi-layout-page" style="padding: 0px;">
            <!-- 當月 / 當周 -->
            <div class="kmi-row-fields" style="justify-content: flex-end;">
                <div class="column-item select-date" style="margin-left: 0px;" ng-class="{'is-select': nowState == 'Month'}">
                    <label class="label" ng-bind="'mobileOPM01.month' | translate" ng-click="getMonthData();"></label>
                </div>
                <div class="column-item select-date" ng-class="{'is-select': nowState == 'Week'}">
                    <label class="label" ng-bind="'mobileOPM01.week' | translate" ng-click="getWeekData();"></label>
                </div>
            </div>
            <!-- 長條圖 -->
            <div class="kmi-row-fields">
                <div id="barChart">
                </div>
            </div>
            <!-- tab頁籤 -->
            <div class="kmi-tab-content">
                <div class="tab" ng-click="changeTab('Q')" ng-class="{'blue': tab == 'Q'}">
                    <div class="check-box" style="border: 1px solid #1ab7cd;"></div>
                    <label ng-bind="'mobileOPM01.tab.piece' | translate" ></label>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="tab" ng-click="changeTab('T')" ng-class="{'orange': tab == 'T'}">
                    <div class="check-box" style="border: 1px solid #ea9114;"></div>
                    <label ng-bind="'mobileOPM01.tab.timing' | translate" ></label>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="tab" ng-click="changeTab('O')" ng-class="{'gray': tab == 'O'}">
                    <div class="check-box" style="border: 1px solid #cecece;"></div>
                    <label ng-bind="'mobileOPM01.tab.other' | translate" ></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
            <div class="kmi-list">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'mobileOPM01.list.product_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'mobileOPM01.list.total_output' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'mobileOPM01.list.total_price' | translate"></div>
                </div>
                <div class="kmi-list__row-content" >
                    <div class="kmi-list__row" ng-repeat="item in item_list track by $index">
                        <div class="kmi-list__column" style="flex: 1;" ng-bind="item.product_no"></div>
                        <div class="kmi-list__column" style="flex: 1;" ng-bind="item.total_output"></div>
                        <div class="kmi-list__column" style="flex: 1;" ng-bind="item.total_price"></div>
                        <div class="kmi-can-click" ng-click="openWageData(item);"></div>
                    </div>
                </div>
            </div>
        </div>    
    </div>
</div>
